<script setup>
	import {
		ref,
		onMounted,
	} from "vue"
	import {
		useRoute
	} from 'vue-router'
	import {
		listTabooApi,
	} from '@/assets/api/tarbar/home.js'
	import {
		navigateToMemorialHall,
	} from '@/assets/scripts/navigate.js'

	// 组件
	import bottomTabBar from '@/components/bottomTabBar.vue'
	import aboutMeSacrificeCard from '@/components/aboutMeSacrificeCard.vue'
	import bg1 from '@/assets/pic/my-bg-1.png'
	import bg2 from '@/assets/pic/my-bg-2.png'

	const pageCurrent = ref(0)
	const manageList = ref([])
	const followList = ref([])
	const loading = ref(true)
	const managePageNum = ref(1)
	const followPageNum = ref(1)
	const manageTotal = ref(10)
	const followTotal = ref(10)

	const bannerList = [{
		title: '我管理的纪念馆',
		img: bg1,
	}, {
		title: '我关注的纪念馆',
		img: bg2,
	}]

	const setCurrent = (index) => {
		pageCurrent.value = index
	}

	const handleManageMore = () => {
		if (loading.value) return
		loading.value = true
		managePageNum.value = managePageNum.value + 1
		manageList_init()
	}

	const handleFollowMore = () => {
		if (loading.value) return
		loading.value = true
		followPageNum.value = followPageNum.value + 1
		followList_init()
	}

	onMounted(() => {
		route_init()
		manageList_init()
		followList_init()
	})

	const route_init = async () => {
		const route = useRoute()
		if (route.query.pageCurrent && route.query.pageCurrent !== 'undefined') {
			pageCurrent.value = route.query.pageCurrent
		}
	}

	const manageList_init = async () => {
		const res = await listTabooApi(5, managePageNum.value)
		if (res.code === 200) {
			manageTotal.value = res.total
			const rows = res.total <= (managePageNum.value - 1) * 10 ? [] : res.rows
			manageList.value = [...manageList.value.slice(0, (managePageNum.value - 1) * 10), ...rows]
			loading.value = false
		}
	}

	const followList_init = async () => {
		const res = await listTabooApi(6, followPageNum.value)
		if (res.code === 200) {
			followTotal.value = res.total
			const rows = res.total <= (followPageNum.value - 1) * 10 ? [] : res.rows
			followList.value = [...followList.value.slice(0, (followPageNum.value - 1) * 10), ...rows]
			loading.value = false
		}
	}
</script>

<template>

	<view class="pb-normal">
		<image :src="bannerList[pageCurrent].img" mode="scaleToFill" class="image image-fill-x bg-ad">
		</image>
		<uv-grid :border="false" :col="2" class="py-big pb-small">
			<uv-grid-item>
				<uv-button @click="setCurrent(0)" :type="pageCurrent==0?'success':'info'" class="pl-big ml-big"
					:plain="pageCurrent==0?false:true" :text="bannerList[0].title"></uv-button>
			</uv-grid-item>
			<uv-grid-item>
				<uv-button @click="setCurrent(1)" :type="pageCurrent==1?'success':'info'" class="pr-big mr-big"
					:plain="pageCurrent==1?false:true" :text="bannerList[1].title"></uv-button>
			</uv-grid-item>
		</uv-grid>

		<view v-show="pageCurrent==0">
			<uv-empty class="py-normal" mode="list" icon="empty-favor" style="background-color: #fff"
				v-if="!manageList.length"></uv-empty>
			<uv-row class="px-normal bg-white pt-normal" v-for="(item, index) in manageList" :key="index">
				<uv-col>
					<aboutMeSacrificeCard :data="item" @click="navigateToMemorialHall(item.id)"></aboutMeSacrificeCard>
				</uv-col>
			</uv-row>
			<view class="pb-normal pl-normal pr-normal" v-if="!loading && manageTotal > managePageNum * 10">
				<uv-button style="width: 100%;" type="success" text="查看更多" @click="handleManageMore"></uv-button>
			</view>
		</view>

		<view v-show="pageCurrent==1">
			<uv-empty class="py-normal" mode="list" icon="empty-favor" style="background-color: #fff"
				v-if="!followList.length"></uv-empty>
			<uv-row class="px-normal bg-white pt-normal" v-for="(item, index) in followList" :key="index">
				<uv-col>
					<aboutMeSacrificeCard :data="item" @click="navigateToMemorialHall(item.id)"></aboutMeSacrificeCard>
				</uv-col>
			</uv-row>
			<view class="pb-normal pl-normal pr-normal" v-if="!loading && followTotal > followPageNum * 10">
				<uv-button style="width: 100%;" type="success" text="查看更多" @click="handleFollowMore"></uv-button>
			</view>
		</view>
	</view>


	<bottomTabBar current='1'></bottomTabBar>
</template>

<style lang="scss" scoped>
	.bg-ad {
		height: 160px;
	}
</style>